import React, { useState, useEffect } from 'react'
import { Modal, Form, Input, Button, InputNumber, Select, Upload, message } from "antd"
import Uploadimg from "@/components/ProductManagement/Upload"
import "./index.css"
import * as http from "@/api";//引入所有的axios请求

let { Option } = Select;
export default function DialogModal(props) {

    let { dialogVisible, actionType, onCancel, onAddProduct } = props;
    //hooks
    let [categoryList, setCategoryList] = useState([])//用于储存类目
    useEffect(function () { //hooks中针对副作用的hook;hook不能嵌套在if之中
        if (dialogVisible) {  //dialog已经打开了,显示,发请求获取类目
            http.getCategory()
                .then(res => {
                    if (res.data.state) {
                        //获取数据成功
                        setCategoryList(res.data.data)
                    }
                })
        }
    }, [dialogVisible])
    const layout = {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
    };
    const validateMessages = {
        required: '${label}必须填写',
        number: {
            range: '${label}必须在${min}到${max}之间'
        },
    };

    const onFinish = (values) => { //表单完成事件
        // console.log(values);
        onAddProduct(values)
    };

    const handleSelectChange = (info) => { //下拉框选择触发事件

    }
    const showDialog = () => {

    }



    const handleCancel = () => { //点击取消按钮触发的事件
        //关闭dialog
        onCancel()
    }

    return (
        <Modal onCancel={onCancel} visible={dialogVisible} footer={false}>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Form.Item name={['imageUrl']} valuePropName="imgValue" label="商品图片">
                    <Uploadimg />
                </Form.Item>
                <Form.Item name={['category_id']} label="选择类目" rules={[{ required: true }]}>
                    <Select value="lucy" style={{ width: 240 }} onChange={handleSelectChange}>
                        {categoryList.map((item) => {
                            return <Option key={item.category_id} value={item.category_id}>{item.categoryName}</Option>
                        })}
                    </Select>
                </Form.Item>
                <Form.Item name={['productName']} label="商品名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['price']} label="商品价格" rules={[{ type: 'number', min: 0.1, max: 9999, required: true }]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item name={['inventory']} label="商品库存" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['description']} label="商品描述" rules={[{ required: true }]}>
                    <Input.TextArea />
                </Form.Item>
                <Form.Item className="dia" rules={[{ required: true }]}>
                    <Button type="primary" htmlType="submit" size='large'>
                        确定
                    </Button>
                    <Button type="primary" danger size='large' onClick={handleCancel}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}